<at-panel>
    <at-panel-heading
        title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
        badge="{{ vm.applicationsCount }}"
        hide-dismiss="true">
    </at-panel-heading>

    <at-panel-body>
        <div class="at-List-toolbar">
            <smart-search
                class="at-List-search"
                django-model="applications"
                base-path="applications"
                iterator="application"
                list="list"
                dataset="application_dataset"
                collection="collection"
                search-tags="searchTags">
            </smart-search>
            <div class="at-List-toolbarAction" ng-show="canAdd">
                <button
                    aria-label="{{:: vm.strings.get('list.ADD') }}"
                    type="button"
                    ui-sref="applications.add"
                    class="at-Button--add"
                    id="button-add"
                    aw-tool-tip="{{:: vm.strings.get('list.ADD') }}"
                    data-placement="top"
                    aria-haspopup="true"
                    aria-expanded="false">
                </button>
            </div>
        </div>
        <at-list-toolbar
            ng-if="vm.applicationsCount > 0"
            sort-only="true"
            sort-value="vm.toolbarSortValue"
            sort-options="vm.toolbarSortOptions"
            on-sort="vm.onToolbarSort">
        </at-list-toolbar>
        <at-list results="applications">
            <at-row ng-repeat="application in applications"
                ng-class="{'at-Row--active': (application.id === vm.activeId)}">
                <div class="at-Row-items">
                    <at-row-item
                        header-value="{{ application.name }}"
                        header-state="applications.edit({application_id:{{application.id}}})">
                    </at-row-item>
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_ORGANIZATION') }}"
                        value="{{ application.summary_fields.organization.name }}"
                        value-link="/#/organizations/{{ application.summary_fields.organization.id }}">
                    </at-row-item>
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}"
                        value="{{ vm.getModified(application) }}">
                    </at-row-item>
                </div>
                <div class="at-Row-actions">
                    <at-row-action icon="fa-trash" ng-click="vm.deleteApplication(application)"
                        ng-show="application.summary_fields.user_capabilities.delete">
                    </at-row-action>
                </div>
            </at-row>
        </at-list>
    </at-panel-body>
    <paginate
        base-path="applications"
        iterator="application"
        dataset="application_dataset"
        collection="applications">
    </paginate>
</at-panel>
